* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap {
  width: 100vw;
  min-height: 100vh;
  position: relative;
  // background-image: linear-gradient(to right, #92fe9d 0%, #00c9ff 100%);
  background-color: #fff;
  overflow: hidden;
  svg {
    position: absolute; 
    bottom: -20%;
    left: 0;
  }
  .box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px;
    align-items: center;
    min-width: 800px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 25px;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: saturate(180%) blur(20px);
    opacity: 0.7;
    // z-index: 5;
    border-top: rgba(255, 255, 255, 0.5);
    border-left: rgba(255, 255, 255, 0.5);
    box-shadow: inset 1px 1px 5px 4px rgba(0, 0, 0, 0.1),
    1px 1px 5px 4px rgba(0, 0, 0, 0.1);
    // animation: opt 15s ease-in infinite alternate;
    .pagination {
      user-select: none;
      ul {
        display: flex;
        justify-content: center;
        align-items: center;
        li {
          list-style: none;
          color: rgba(117, 117, 241, 0.829);
          margin-left: 10px;
          cursor: pointer;
        }
        .active {
          color: #000;
        }
        .disabled {
          cursor: not-allowed;
        }
      }
    }
  }

  .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    // backdrop-filter: blur(20px);
    text-align: center;
    line-height: 100px;
    font-size: 16px;
    cursor: pointer;
    font-weight: 600;
    // opacity: 0.75;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    button {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      border: none;
      cursor: pointer;
      background-color: transparent;
      color: #fff;
    }
  }
  .show {
    position: absolute;
    top: 20%;
    left: 10%;
    animation: show 10s linear infinite alternate;
    background-image: linear-gradient(to top, #0fd850 0%, #f9f047 100%);
    color: #fff;
    font-size: 16px;
  }

  .choose {
    position: absolute;
    bottom: 20%;
    left: 10%;
    animation: choose 10s ease-in-out  infinite alternate;
    background-image: linear-gradient(to right, #f9d423 0%, #ff4e50 100%);
  }
  .home {
    position: absolute;
    right: 5%;
    top: 10%;
    width: 150px;
    height: 150px;
    line-height: 150px;
    background-color: rgba(255, 255, 255, 1);
    border-right: 1px solid rgba(#FFFF66,0.8);
    border-top: 1px solid rgba(#FFFF66,0.8);
    box-shadow: -30px 40px 80px 20px rgba(#FFFF66,0.7);
    a {
      color: rgba(#FFFF66,0.7);
      text-shadow: -30px 50px 80px 20px rgba(#FFFF66,0.7);
      font-size: 20px;
    }

  }
}

@keyframes show {
  0%, 100% {
  }
  25% {
    transform: translate(100px, -100px) rotate(360deg) scale(1.3);
  }
  50% {
    transform: scale(1.5);
  }
  75% {
    transform: translate(-100px, 100px) rotate(-360deg) scale(1.1);
  }
}

@keyframes choose {
  0%, 100% {
  }
  25% {
    transform: translate(100px, 100px) rotate(360deg) scale(1.3);
  }
  50% {
    transform: scale(1.5);
  }
  75% {
    transform: translate(-100px, -100px) rotate(-360deg) scale(1.1);
  }
}

// svg波浪图片
.path-0 {
  animation: pathAnim-0 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pathAnim-0 {
  0% {
    d: path(
      'M 0,500 C 0,500 0,166 0,166 C 48.142952275249726,133.13286471821434 96.28590455049945,100.26572943642866 152,111 C 207.71409544950055,121.73427056357134 270.99933407325193,176.06994697249968 319,203 C 367.00066592674807,229.93005302750032 399.7167591564928,229.4544826735726 461,201 C 522.2832408435072,172.5455173264274 612.1336293007769,116.11212233321001 668,121 C 723.8663706992231,125.88787766678999 745.7487236403995,192.09702799358737 786,218 C 826.2512763596005,243.90297200641263 884.8714761376248,229.4997656924405 946,220 C 1007.1285238623752,210.5002343075595 1070.765371809101,205.90390923665063 1126,205 C 1181.234628190899,204.09609076334937 1228.067036625971,206.88459736095697 1279,201 C 1329.932963374029,195.11540263904303 1384.9664816870145,180.55770131952153 1440,166 C 1440,166 1440,500 1440,500 Z'
    );
  }
  25% {
    d: path(
      'M 0,500 C 0,500 0,166 0,166 C 68.3427796275743,140.66997163645334 136.6855592551486,115.33994327290665 184,109 C 231.3144407448514,102.66005672709335 257.6005426069799,115.31019854482675 303,116 C 348.3994573930201,116.68980145517325 412.9122703169319,105.41926254778639 479,130 C 545.0877296830681,154.5807374522136 612.7503761252929,215.01275126402766 665,215 C 717.2496238747071,214.98724873597234 754.0862251818966,154.52973239610307 794,154 C 833.9137748181034,153.47026760389693 876.9047231471204,212.86831915156003 935,206 C 993.0952768528796,199.13168084843997 1066.2948822296216,125.99699099765691 1122,124 C 1177.7051177703784,122.00300900234309 1215.915747934394,191.1437168578123 1266,210 C 1316.084252065606,228.8562831421877 1378.042126032803,197.42814157109385 1440,166 C 1440,166 1440,500 1440,500 Z'
    );
  }
  50% {
    d: path(
      'M 0,500 C 0,500 0,166 0,166 C 65.10341595757801,196.40720187446047 130.20683191515602,226.81440374892094 189,213 C 247.79316808484398,199.18559625107906 300.276088296954,141.1495868787767 348,135 C 395.723911703046,128.8504131212233 438.688814897028,174.5872487359724 476,173 C 513.311185102972,171.4127512640276 544.9686521149341,122.50141817733382 610,122 C 675.0313478850659,121.49858182266618 773.4365766432359,169.40707855469233 826,168 C 878.5634233567641,166.59292144530767 885.2850413121224,115.87026760389688 933,121 C 980.7149586878776,126.12973239610312 1069.4232581082747,187.1118510297201 1125,201 C 1180.5767418917253,214.8881489702799 1203.0219262547785,181.68232827722284 1250,168 C 1296.9780737452215,154.31767172277716 1368.4890368726108,160.15883586138858 1440,166 C 1440,166 1440,500 1440,500 Z'
    );
  }
  75% {
    d: path(
      'M 0,500 C 0,500 0,166 0,166 C 53.61208533727958,174.64289061536564 107.22417067455916,183.2857812307313 152,194 C 196.77582932544084,204.7142187692687 232.71540263904296,217.49976569244052 292,193 C 351.28459736095704,168.50023430755948 433.9142187692688,106.71515599950669 498,104 C 562.0857812307312,101.28484400049331 607.6277222838821,157.63961030953266 662,185 C 716.3722777161179,212.36038969046734 779.5748920952029,210.7264027623628 829,205 C 878.4251079047971,199.2735972376372 914.0727093353064,189.45477864101616 954,186 C 993.9272906646936,182.54522135898384 1038.1342705635714,185.45448267357256 1097,179 C 1155.8657294364286,172.54551732642744 1229.3902084104081,156.72729066469356 1289,153 C 1348.6097915895919,149.27270933530644 1394.3048957947958,157.63635466765322 1440,166 C 1440,166 1440,500 1440,500 Z'
    );
  }
  100% {
    d: path(
      'M 0,500 C 0,500 0,166 0,166 C 48.142952275249726,133.13286471821434 96.28590455049945,100.26572943642866 152,111 C 207.71409544950055,121.73427056357134 270.99933407325193,176.06994697249968 319,203 C 367.00066592674807,229.93005302750032 399.7167591564928,229.4544826735726 461,201 C 522.2832408435072,172.5455173264274 612.1336293007769,116.11212233321001 668,121 C 723.8663706992231,125.88787766678999 745.7487236403995,192.09702799358737 786,218 C 826.2512763596005,243.90297200641263 884.8714761376248,229.4997656924405 946,220 C 1007.1285238623752,210.5002343075595 1070.765371809101,205.90390923665063 1126,205 C 1181.234628190899,204.09609076334937 1228.067036625971,206.88459736095697 1279,201 C 1329.932963374029,195.11540263904303 1384.9664816870145,180.55770131952153 1440,166 C 1440,166 1440,500 1440,500 Z'
    );
  }
}

.path-1 {
  animation: pathAnim-1 4s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes pathAnim-1 {
  0% {
    d: path(
      'M 0,500 C 0,500 0,333 0,333 C 48.46294240966826,333.1513380194845 96.92588481933652,333.302676038969 147,346 C 197.07411518066348,358.697323961031 248.75940313232218,383.94063386360835 300,376 C 351.2405968676778,368.05936613639165 402.0365026513749,326.9347885065976 465,303 C 527.9634973486251,279.0652114934024 603.0945862621778,272.3202121100013 655,283 C 706.9054137378222,293.6797878899987 735.5851522999135,321.7843630533974 782,326 C 828.4148477000865,330.2156369466026 892.5648045381674,310.542335676409 952,317 C 1011.4351954618326,323.457664323591 1066.1556295474168,356.04629424096686 1127,349 C 1187.8443704525832,341.95370575903314 1254.8126772721666,295.27248735972375 1308,286 C 1361.1873227278334,276.72751264027625 1400.5936613639167,304.8637563201381 1440,333 C 1440,333 1440,500 1440,500 Z'
    );
  }
  25% {
    d: path(
      'M 0,500 C 0,500 0,333 0,333 C 62.67628560858306,310.3264767542237 125.35257121716612,287.6529535084474 180,278 C 234.64742878283388,268.3470464915526 281.26600073991864,271.71466272043403 326,278 C 370.73399926008136,284.28533727956597 413.5834258231595,293.4883956098163 470,314 C 526.4165741768405,334.5116043901837 596.4002959674436,366.3317548403009 659,350 C 721.5997040325564,333.6682451596991 776.8153903070663,269.18458502898017 818,271 C 859.1846096929337,272.81541497101983 886.3381428042915,340.92990504377855 943,367 C 999.6618571957085,393.07009495622145 1085.8320384757678,377.09579479590576 1145,374 C 1204.1679615242322,370.90420520409424 1236.333703292638,380.68691577259835 1281,376 C 1325.666296707362,371.31308422740165 1382.833148353681,352.1565421137008 1440,333 C 1440,333 1440,500 1440,500 Z'
    );
  }
  50% {
    d: path(
      'M 0,500 C 0,500 0,333 0,333 C 39.08753237143914,369.51868294487605 78.17506474287828,406.0373658897521 136,394 C 193.82493525712172,381.9626341102479 270.387273399926,321.3692193858676 334,320 C 397.612726600074,318.6307806141324 448.2758416574178,376.48575656677764 502,386 C 555.7241583425822,395.51424343322236 612.5093599704032,356.68775434702184 654,340 C 695.4906400295968,323.31224565297816 721.6867184609694,328.76322604513507 772,332 C 822.3132815390306,335.23677395486493 896.7437661857194,336.25934147243794 958,346 C 1019.2562338142806,355.74065852756206 1067.3382167961524,374.19940806511283 1116,357 C 1164.6617832038476,339.80059193488717 1213.9033666296707,286.9430262671106 1268,277 C 1322.0966333703293,267.0569737328894 1381.0483166851645,300.0284868664447 1440,333 C 1440,333 1440,500 1440,500 Z'
    );
  }
  75% {
    d: path(
      'M 0,500 C 0,500 0,333 0,333 C 65.78606486619806,330.5136761622888 131.57212973239612,328.02735232457763 180,316 C 228.42787026760388,303.97264767542237 259.4975459366136,282.4042668639783 309,288 C 358.5024540633864,293.5957331360217 426.43768652114943,326.35558021950914 487,334 C 547.5623134788506,341.64441978049086 600.751707978789,324.17341225798504 657,312 C 713.248292021211,299.82658774201496 772.5554815636948,292.95077074855095 820,318 C 867.4445184363052,343.04922925144905 903.0263657664324,400.0235047478111 957,394 C 1010.9736342335676,387.9764952521889 1083.339055370576,318.9552102602047 1133,308 C 1182.660944629424,297.0447897397953 1209.617412751264,344.1556542113701 1257,358 C 1304.382587248736,371.8443457886299 1372.191293624368,352.42217289431494 1440,333 C 1440,333 1440,500 1440,500 Z'
    );
  }
  100% {
    d: path(
      'M 0,500 C 0,500 0,333 0,333 C 48.46294240966826,333.1513380194845 96.92588481933652,333.302676038969 147,346 C 197.07411518066348,358.697323961031 248.75940313232218,383.94063386360835 300,376 C 351.2405968676778,368.05936613639165 402.0365026513749,326.9347885065976 465,303 C 527.9634973486251,279.0652114934024 603.0945862621778,272.3202121100013 655,283 C 706.9054137378222,293.6797878899987 735.5851522999135,321.7843630533974 782,326 C 828.4148477000865,330.2156369466026 892.5648045381674,310.542335676409 952,317 C 1011.4351954618326,323.457664323591 1066.1556295474168,356.04629424096686 1127,349 C 1187.8443704525832,341.95370575903314 1254.8126772721666,295.27248735972375 1308,286 C 1361.1873227278334,276.72751264027625 1400.5936613639167,304.8637563201381 1440,333 C 1440,333 1440,500 1440,500 Z'
    );
  }
}